<template>
    <div>
      <Form ref="eleForm" :model="fig" :rules="rules" style="text-align:left;line-height: normal;"
        label-position="top">
        <Divider style="margin-top:0">组件属性</Divider>
        <FormItem label="按钮文本" style="line-height: normal;">
          <div>
            <Input v-model="fig.text" placeholder="请填写按钮文本"/>
          </div>
        </FormItem>
        <FormItem label="按钮大小" style="line-height: normal;"  v-if="fig.type !== 'textarea'">
          <div>
            <Select v-model="fig.attr.size">
              <Option value="default">默认</Option>
              <Option value="large">大尺寸</Option>
              <Option value="small">小尺寸</Option>
            </Select>
          </div>
        </FormItem>
        <FormItem label="按钮类型" style="line-height: normal;"  v-if="fig.type !== 'textarea'">
          <div>
            <Select v-model="fig.attr.type" transfer>
              <Option value="default">默认</Option>
              <Option value="primary">主要</Option>
              <Option value="dashed">虚线</Option>
              <Option value="text">文字</Option>
              <Option value="info">信息</Option>
              <Option value="success">成功</Option>
              <Option value="warning">警告</Option>
              <Option value="error">错误</Option>
            </Select>
          </div>
        </FormItem>
        <div style="display:flex;justify-content: space-between;">
          <div>
            <FormItem label="隐藏节点" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.hide"/>
              </div>
            </FormItem>
          </div>
          <div>
            <FormItem label="是否禁用" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.attr.disabled"/>
              </div>
            </FormItem>
          </div>
        </div>
        <div style="display:flex;justify-content: space-between;">
          <div>
            <FormItem label="透明背景" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.attr.ghost"/>
              </div>
            </FormItem>
          </div>
          <div>
            <FormItem label="自动适应" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.attr.long"/>
              </div>
            </FormItem>
          </div>
        </div>
        <FormItem label="Click事件" style="line-height: normal;">
          <div class="tips">请在此处直接填写方法内容</div>
          <div class="tips">请严格遵守vue语法,如需要调用参数则直接this.参数名即可</div>
          <div>
              <CodeEdit ref="codeeditBtn" :code="fig.click" @contentChange="contentChange"/>
          </div>
        </FormItem>
      </Form>
    </div>
</template>

<script>
import CodeEdit from '../form_component/CodeEdit.vue'
export default {
  name: 'BtnAttr',
  components: {
    CodeEdit: CodeEdit
  },
  props: {
    config: {
      type: Object,
      default: undefined
    }
  },
  watch: {
    'config': {
      handler: function (e) {
        this.fig = e
      }
    }
  },
  methods: {
    contentChange (val) {
      this.fig.click = val
      // console.log(val)
    }
  },
  data () {
    return {
      fig: this.config,
      rules: {
      }
    }
  }
}
</script>

<style scoped>

</style>
